<template>
  <div id="spacecp">
    <header1></header1>
    <div class="container layout">
      <div class="row">
        <div class="col-md-12 no-padding user-profile" style="background-color:#fff;color:#000">
          <!---->
          <div class="row profile-container">
            <div class="col-md-3">
              <div class="common-content content-tabs">
                <div class="profile-tabs">
                  <span class="tab-title active">基本信息</span>
                  <span class="tab-title">账号密码</span>
                  <span class="tab-title">站内信</span>
                  <span class="tab-title">邀请码</span>
                </div>
              </div>
            </div>
            <!-- <div class="col-md-9">
              <div class="common-content">
                <div class="row-wrapper">
                  <div class="user-avatar">
                    <div id="user-avatar" role="group" class="form-row form-group">
                      <label
                        id="user-avatar__BV_label_"
                        for="avatar"
                        class="col-sm-4 col-form-label"
                      >头像</label>
                      <div class="col-sm-8">
                        <div class="img-container inline-block">
                          <img
                            src="http://www.gentlener.com:8888/group1\M00/00/01/rB_pcV2fJRSAcUiPAAMOCGIjajY370.jpg"
                            width="100"
                            height="100"
                          />
                          <div class="custom-file b-form-file upload-image">
                            <input type="file" class="custom-file-input" />
                            <label data-browse="Browse" class="custom-file-label">No file chosen</label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-wrapper">
                  <div class="user-nickname">
                    <div id="user-nickname" role="group" class="form-row form-group">
                      <label
                        id="user-nickname__BV_label_"
                        for="nickname"
                        class="col-sm-2 col-form-label"
                      >昵称</label>
                      <div class="col-sm-10">
                        <input
                          style="width:160px"
                          id="nickname"
                          type="text"
                          value
                          class="form-control"
                        />
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row-wrapper form-row">
                  <div class="col-offset-2">
                    <button class="btn btn-primary">保存</button>
                  </div>
                </div>
              </div>
            </div> -->
            <!-- 修改密码 -->
            <div  class="col-md-9">
              <div   class="common-content">
                <div                 
                  class="user-security"
                  switch-tab="function () { [native code] }">
                  <div class="container-fluid">

                    <div data-v-21d814b2 class="user-email">
                      <span data-v-21d814b2>邮箱</span>
                      <span data-v-21d814b2>111****384@qq.com</span>
                      <span data-v-21d814b2 role="button">点击修改</span>
                      <div data-v-21d814b2>
                        <!---->
                      </div>
                    </div>
                    <div data-v-19850dd5 class="user-password">
                      <div data-v-19850dd5 class="display-password">
                        <span data-v-19850dd5>密码</span>
                        <span data-v-19850dd5>******</span>
                        <span data-v-19850dd5>点击修改</span>
                      </div>
                      <div
                        data-v-796ff232
                        data-v-19850dd5
                        class="edit-password"
                        style="display: none;"
                      >
                        <div data-v-796ff232 class="origin-password">
                          <span data-v-796ff232>原密码</span>
                          <input
                            data-v-796ff232
                            type="password"
                            placeholder="至少六位字符"
                            autocomplete="new-password"
                            class="form-control"
                            id="__BVID__172"
                          />
                        </div>
                        <div data-v-796ff232 class="new-password">
                          <span data-v-796ff232>新密码</span>
                          <input
                            data-v-796ff232
                            type="password"
                            placeholder="至少六位字符"
                            class="form-control"
                            id="__BVID__173"
                          />
                          <i data-v-796ff232 class="fa fa-eye-slash"></i>
                        </div>
                        <small data-v-796ff232 class="inline-block color-red message"></small>
                        <div data-v-796ff232 class="bottom-btn">
                          <button data-v-796ff232 class="btn btn-default">取消</button>
                          <button data-v-796ff232 disabled="disabled" class="btn btn-primary">保存</button>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            <!-- 站内信 -->


            <!-- 邀请码 -->

          </div>
        </div>
      </div>
      <div class="modals"></div>
    </div>
    <div></div>
    <div class="risk-validation"></div>
    <footer1></footer1>
  </div>
</template>
<script>
import header1 from "./header";
import footer1 from "./footer";
import {} from "../api/api.js";
export default {
  name: "aa",
  data() {
    return {};
  },
  components: {
    header1: header1,
    footer1: footer1
  },
  methods: {
    sub: function() {
      var user_id = localStorage.getItem("user_id");
      this.axios({
        url: "/api/spacecp/",
        method: "post",
        data: {
          username: this.username,
          password: this.password,
          newpassword1: this.newpassword1,
          newpassword: this.newpassword,
          user_id: user_id
        }
      }).then(res => {
        alert(res.data.mes);
      });
    }
  }
};
</script>
    
    
<style>
.user-profile .profile-container {
  padding-bottom: 20px;
}
.user-profile .profile-tabs span {
  display: block;
  margin: 30px auto;
  padding: 10px 25px;
  width: 118px;
  height: 40px;
  line-height: 20px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
    color: #000;
}
.user-profile .profile-tabs span.active,
.user-profile .profile-tabs span:hover {
  background: #efefef;
}
.common-content {
  margin-bottom: 10px;
  padding: 30px 30px 20px;
  border: 1px solid #eee;
  background: #fff;
}

.user-profile .profile-container .common-content {
  height: 100%;
  min-height: 700px;
  overflow:hidden;
  width:100%
}
.user-avatar .img-container[data-v-a7105100] {
    display: inline-block;
    position: relative;
    width: 125px;
    height: 125px;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
}
.user-avatar .img-container .upload-image {
  display: none;
}

.user-nickname {
  position: relative;
  display: inline-block;
}
.user-email,.user-password{
  margin-bottom:20px
}
.user-email span[data-v-21d814b2]:first-child{
  width: 92px;
  display: inline-block;
}
.user-password .display-password span[data-v-19850dd5]:first-child{
  width: 92px;
  display: inline-block;
}
.user-email  span:nth-child(2){
      width: 200px;
      display: inline-block;
}
.user-password .display-password span:nth-child(2){
      width: 200px;
      display: inline-block;
}
.user-email span:nth-child(3){
  color: #4990e2;
    cursor: pointer;
}
.user-password span:nth-child(3){
  color: #4990e2;
    cursor: pointer;
}
</style>